<!--
 * @Description:
 * @Version: 1.0.0
 * @Autor: zhou
 * @Date: 2022-04-20 14:47:35
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2022-08-30 11:07:22
-->
<template>
    <div class="pro-view">
        <!-- 头部 -->
        <div :class="['pro-header', tabName]">
            <pro-header user="铁山港高新科技园管理员" />
        </div>
        <!-- 导航 -->
        <div class="pro-nav-box forbid">
            <pro-nav :list="tabList" @tabComp="tabComp"></pro-nav>
        </div>
        <div class="pro-main position-re">
            <!-- 地图 -->
            <div class="map full-screen">
                <common-map
                    ref="pro_map"
                    :diyMarker="diy_marker"
                    :ShowZoom="false"
                    ZoomCtrlPos="LEFT_TOP"
                    :location="location"
                    :polygonsData="polygonsData"
                    :MarkerData="MarkerData"
                    key="proview"
                    :zoom_level="zoom_level"
                    :stroke="stroke"
                    :strokeWidth="2"
                    :strokeOpacity="1"
                    fillColor="#0b4e80"
                    :fillOpacity="0.1"
                    :maptype="0"
                    theme_style="indigo"
                    @onIcon="handleIcon"
                    @tapOverlay="handleTapOverlay"
                    @detail="handleDetail"
                    @closeInfoWin="handleCloseInfoWin"
                    @mouserover_map="mouseoverMap"
                    @mouserout_map="mouseoutMap"
                >
                </common-map>
            </div>
            <!-- 内容 -->
            <component
                v-show="cut_tab_id != -1"
                :is="loadComp"
                :ref="'ref_' + tabName"
                :company_type="company_type"
                :company_data="company_monitor"
                @onClick="onClick"
                @marker="loadMarker"
                @table_row="handleTableRow"
                @changeFlag="onChangeFlag"
                @changeFlag2="onChangeFlag2"
            ></component>
        </div>
        <div :class="['pro-footer', tabName]">
            <pro-footer />
        </div>
    </div>
</template>

<script>
import ProHeader from "@/components/Pro/ProHeader";
import ProFooter from "@/components/Pro/ProFooter";
import ProNav from "@/components/Pro/ProNav";
import CommonMap from "@/components/Common/CommonMap";
import defaultMapData from "@/components/Tmap/xg.json";

import { listIndustry, getMonitoringCompanyList } from "@/api/proview.js";

export default {
    name: "ProView",
    components: { ProHeader, ProNav, ProFooter, CommonMap },
    provide() {
        const that = this;
        return {
            setParent(fn) {
                if (typeof fn === "function") {
                    fn(that);
                }
            },
        };
    },
    data() {
        return {
            diy_marker: false,
            // 企业种类
            company_type: [],
            stroke: "rgb(9,24,39,0.5)",
            //地图配置
            location: {
                lng: 109.44609039839921, //109.47813,
                lat: 21.592061120097514, //21.54099,
            },
            zoom_level: 15,
            MarkerData: [],
            polygonsData: defaultMapData,
            has_active: true,
            cut_tab_id: 1, // 当前tab的id
            tabName: "NavDetection",
            tabList: [
                {
                    id: 1,
                    name: "检测对比",
                    checked: true,
                    tabName: "NavDetection",
                },

                {
                    id: 2,
                    name: "重点人员",
                    checked: false,
                    tabName: "NavPerson",
                },
                {
                    id: 3,
                    name: "重点企业",
                    checked: false,
                    tabName: "NavCompany",
                },
                {
                    id: 4,
                    name: "重点行业",
                    checked: false,
                    tabName: "NavIndustry",
                },
                {
                    id: 5,
                    name: "网格管理",
                    checked: false,
                    tabName: "NavGrid",
                },
                {
                    id: 6,
                    name: "网格员管理",
                    checked: false,
                    tabName: "NavGridUser",
                },
                {
                    id: 7,
                    name: "重点人员追踪",
                    checked: false,
                    tabName: "NavMap",
                },
            ],
            // 各个页面企业列表数据 (缓存)
            company_monitor: null,
        };
    },
    computed: {
        loadComp() {
            if (this.tabName && !this.$options.components[this.tabName]) {
                return (resolve) =>
                    require([`@/components/Pro/${this.tabName}`], resolve);
            }
            return "";
        },
    },
    created() {
        // this.listIndustry();
    },
    mounted() {},

    methods: {
        /** 导航切换 */
        tabComp(id) {
            let flag = false; // 有活跃状态的  和 均为非活跃状态 之间的切换,
            this.$refs["pro_map"].handleClose();
            id == 4 ? (this.diy_marker = true) : (this.diy_marker = false); // 是否启用 diy
            this.tabList.forEach((item) => {
                // 当前有活跃的
                if (this.has_active) {
                    // 点击处于活跃当中的
                    if (id == this.cut_tab_id) {
                        if (item.id == id) {
                            item.checked = false;
                            this.tabName = "";
                            flag = true;
                        }
                    }
                    // 点击处于非活跃当中的
                    else {
                        if (item.id == id) {
                            item.checked = true;
                            this.tabName = item.tabName;
                        } else {
                            item.checked = false;
                        }
                    }
                }
                // 当前无活跃的
                else {
                    if (item.id == id) {
                        item.checked = true;
                        this.tabName = item.tabName;
                        flag = true;
                    } else {
                        item.checked = false;
                    }
                }
            });
            // 更改活跃状态
            if (flag) {
                this.has_active = !this.has_active;
            }
            // 根据活跃状态 赋值
            if (this.has_active) {
                this.cut_tab_id = id;
            } else {
                this.cut_tab_id = -1;
            }
            this.polygonsData = defaultMapData;
            if (id == 7) {
                this.MarkerData = [
                    {
                        lng: 109.44721495049129,
                        lat: 21.597928178770573,
                        grade: 6,
                    },
                    {
                        lng: 109.44651662054051,
                        lat: 21.601274950459544,
                        grade: 6,
                    },
                    {
                        lng: 109.44410306318375,
                        lat: 21.596135838128505,
                        grade: 6,
                    },
                    {
                        lng: 109.45381662054051,
                        lat: 21.601274950459544,
                        grade: 6,
                    },
                    {
                        lng: 109.44410306318375,
                        lat: 21.599135838128505,
                        grade: 6,
                    },
                    {
                        lng: 109.44571939453652,
                        lat: 21.591184805932808,
                        grade: 6,
                    },
                    {
                        lng: 109.4486705863797,
                        lat: 21.59438628679835,
                        grade: 6,
                    },
                    {
                        lng: 109.44753144852658,
                        lat: 21.597048444070552,
                        grade: 6,
                    },
                    {
                        lng: 109.44890244629673,
                        lat: 21.594330708317347,
                        grade: 6,
                    },
                    {
                        lng: 109.44849921165844,
                        lat: 21.597227905387514,
                        grade: 6,
                    },
                    {
                        lng: 109.44690244629673,
                        lat: 21.594330708317347,
                        grade: 6,
                    },
                    {
                        lng: 109.44649921165844,
                        lat: 21.597227905387514,
                        grade: 6,
                    },
                    {
                        lng: 109.44720886081595,
                        lat: 21.59697588373859,
                        grade: 7,
                    },
                    // {
                    //     id: 1,
                    //     lng: item.lng,
                    //     lat: item.lat,
                    //     content: {
                    //         name: item.company_name,
                    //     },
                    //     introduction: null,
                    //     grade: 28,
                    // }
                ];
            } else if (id == 3) {
                this.MarkerData = [
                    {
                        lng: 109.44704186305663,
                        lat: 21.597332218036396,
                        grade: 6,
                        id: 162,
                        title: "南康市场",
                    },
                    {
                        lng: 109.44475047908617,
                        lat: 21.594146031536283,
                        grade: 6,
                        id: 227,
                        title: "海康驾校",
                    },
                    {
                        lng: 109.44322124090998,
                        lat: 21.600073975033048,
                        grade: 6,
                        id: 228,
                        title: "嘉元驾校",
                    },
                    {
                        lng: 109.44920073216281,
                        lat: 21.595073884223936,
                        grade: 6,
                        id: 229,
                        title: "北海顺兆物流有限公司",
                    },
                    {
                        lng: 109.444870755261,
                        lat: 21.59153429971144,
                        grade: 6,
                        id: 230,
                        title: "广西金斗运国际物流有限公司",
                    },
                    {
                        lng: 109.44957874596439,
                        lat: 21.599781873773725,
                        grade: 6,
                        id: 231,
                        title: "北海市铁山港玉铁物流有限公司",
                    },
                    {
                        lng: 109.44714175924035,
                        lat: 21.58758105345898,
                        grade: 6,
                        id: 232,
                        title: "北海市和东贸易有限公司",
                    },
                    {
                        lng: 109.44626894441419,
                        lat: 21.60061870958829,
                        grade: 6,
                        id: 233,
                        title: "北海市祥通运输有限责任公司",
                    },
                ];
            } else {
                this.MarkerData = [];
            }
        },
        /** 行业种类列表 (用于帅选企业的 过滤条件) */
        listIndustry() {
            listIndustry().then((res) => {
                if (res.code == 0) {
                    this.company_type = res.data.map((item) => {
                        return {
                            dictLabel: item.dictLabel,
                            dictValue: item.dictValue,
                            cols: item.dictLabel.length >= 14 ? 2 : 1,
                        };
                    });
                    this.company_type.unshift({
                        dictLabel: "全部行业",
                        dictValue: "",
                        cols: 2,
                    });
                }
            });
        },

        // 页面子组件 触发回来的函数=========================================================
        // table 传出来的事件( 某行的一列接受点击)
        onClick(row) {
            this.location = {
                lng: row.lng,
                lat: row.lat,
            };
            this.zoom_level = 11;
            this.MarkerData.forEach((item) => {
                if (item.id == row.id) {
                    this.$refs["pro_map"].openInfo(item, {
                        lnglat: {
                            lng: item.lng,
                            lat: item.lat,
                        },
                    });
                }
            });
        },
        // 地图标点的加载
        loadMarker(data) {
            this.MarkerData = data;
        },
        // 点击table的 某行
        handleTableRow(row) {
            this.MarkerData.forEach((item) => {
                if (item.id == row.id) {
                    this.$refs["pro_map"].openInfo(item, {
                        lnglat: {
                            lng: item.lng,
                            lat: item.lat,
                        },
                    });
                }
            });
        },
        // 地图标点接受 (子组件函数 触发回来的函数)
        onChangeFlag(item) {
            this.$refs["pro_map"].openInfo(item, {
                lnglat: {
                    lng: item.lng,
                    lat: item.lat,
                },
            });
        },
        // 地图标点接受 (子组件函数 触发回来的函数)
        onChangeFlag2(item) {
            this.$refs["pro_map"].openInfo(item, {
                lnglat: {
                    lng: item.lng,
                    lat: item.lat,
                },
            });
        },

        // 地图子组件 触发出来的函数=========================================================
        // 点击地图上的标点, 调用子组件函数
        handleIcon(id) {
            this.$refs["ref_" + this.tabName].getIntroduction(id);
        },
        // 点击覆盖层
        handleTapOverlay(obj) {
            this.$refs["ref_" + this.tabName].getIntroduction2(obj);
        },
        // 点击关闭消息弹窗
        handleCloseInfoWin(id) {
            this.$refs["ref_" + this.tabName].closeMap(id);
        },
        // 点击详情
        handleDetail(id) {
            this.$refs["ref_" + this.tabName].detailMap(id);
        },
        // 地图组件的 鼠标移入
        mouseoverMap() {
            this.stroke = "#2EF7FC";
            if (this.tabName == "NavRisk")
                this.$refs["ref_" + this.tabName].handleHoverRow();
        },
        // 地图组件的 鼠标移出
        mouseoutMap() {
            this.stroke = "rgb(9,24,39,0.5)";
        },

        // 各个页面企业列表的数据
    },
};
</script>

<style scoped lang="scss"></style>
